<template>
  <SectionContainer class="u-p20">
    <Tabs class="u-mb20">
      <TabsItem @click="$router.push({
        name: 'generalize-plan'
      })">广告计划</TabsItem>
      <TabsItem @click="$router.push({
        name: 'generalize-cell'
      })">广告单元</TabsItem>
      <TabsItem is-active>广告创意</TabsItem>
    </Tabs>

    <!-- 筛选 -->
    <el-form
      inline
      class="m-filter"
    >
      <el-row>
        <el-form-item>
          <el-select
            v-model="filter.dimensionality"
            size="small"
            class="u-w145"
            filterable
            placeholder="请选择数据维度"
          >
            <el-option
              :value="0"
              label="创意维度"
            ></el-option>
            <el-option
              :value="1"
              label="广告位维度"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select
            filterable
            size="small"
            class="u-w145"
            v-model="filter.status"
            placeholder="请选择状态"
          >
            <el-option
              :value="0"
              label="全部状态"
            ></el-option>
            <el-option
              :value="2"
              label="启用"
            ></el-option>
            <el-option
              :value="1"
              label="停用"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-date-picker
            :clearable="false"
            v-model="filter.daterange"
            size="small"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            :picker-options="DATERANGE_OPTIONS"
            class="u-w300"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="filter.keyword"
            size="small"
            placeholder="请输入广告创意名称或ID"
          ></el-input>
        </el-form-item>
        <el-form-item v-if="filter.dimensionality === 0">
          <el-button
            size="small"
            type="primary"
            @click="search"
          >查询</el-button>
        </el-form-item>
      </el-row>
      <el-row v-if="filter.dimensionality === 1">
        <el-form-item>
          <el-select
            v-model="filter.adxId"
            size="small"
            class="u-w145"
            filterable
            placeholder="请选择ADX平台"
            @change="adlocalAdxChange"
          >
            <el-option
              v-for="item in adlocalAdxOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
          <el-select
            v-model="filter.mediaId"
            size="small"
            filterable
            class="u-w145 u-ml10"
            placeholder="请选择投放媒体"
            @change="adlocalMediaChange"
          >
            <el-option
              v-for="item in adlocalMediaOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
          <el-select
            v-model="filter.pid"
            size="small"
            filterable
            class="u-w145 u-ml10"
            placeholder="请选择广告位名称"
          >
            <el-option
              v-for="item in adlocalSpaceOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            @click="search"
            size="small"
            type="primary"
          >查询</el-button>
        </el-form-item>
      </el-row>
    </el-form>

    <!-- Table -->
    <TableFull
      :data="tableData"
      :column-data="tableColumn"
      :attach-width="170"
      :total="tableTotal"
      :current-page="page.pageNo"
      @current-change="currentChange"
      @size-change="sizeChange"
      @selection-change="tableSelectionChange"
    >
      <el-form
        inline
        class="m-filter"
        slot="handle"
      >
        <el-form-item v-permission="['promote_creative_add']">
          <el-button
            type="primary"
            size="small"
            @click="$router.push({
              name: 'generalize-creative-detail',
              query: {
                action: 'create',
                referrer: 'generalize-creative',
                planId: $route.query.planId,
                unitId: $route.query.unitId,
                query: {
                  ...page,
                  ...$route.query
                }
              }
            })"
          >创建广告创意</el-button>
        </el-form-item>
        <el-form-item v-permission="['promote_creative_enable']">
          <el-button
            size="small"
            @click="openStatusMulti"
          >启用</el-button>
        </el-form-item>
        <el-form-item v-permission="['promote_creative_enable']">
          <el-button
            size="small"
            @click="closeStatusMulti"
          >停用</el-button>
        </el-form-item>
        <el-form-item>
          <CustomTableColumn
            :module="1"
            :columns.sync="tableColumn"
          />
        </el-form-item>
      </el-form>
      <template slot="column">
        <el-table-column
          :resizable="false"
          align="center"
          width="40"
          type="selection"
        ></el-table-column>
        <el-table-column
          :resizable="false"
          align="center"
          label="操作"
        >
          <el-table-column
            :resizable="false"
            align="center"
            label="总计"
            width="130"
            class-name="u-table--total"
          >
            <template slot-scope="scope">
              <el-tooltip
                v-permission="['promote_creative_view']"
                effect="dark"
                placement="top"
                content="查看"
              >
                <i
                  @click="$router.push({
                    name: 'generalize-creative-detail',
                    query: {
                      action: 'detail',
                      referrer: 'generalize-creative',
                      planId: scope.row.planId,
                      unitId: scope.row.unitId,
                      creativeId: scope.row.creativeId,
                      query: {
                        ...page,
                        ...$route.query
                      }
                    }
                  })"
                  class="u-table-handle iconfont iconfont-6"
                ></i>
              </el-tooltip>
              <el-tooltip
                v-permission="['promote_creative_edit']"
                effect="dark"
                placement="top"
                content="编辑"
              >
                <i
                  @click="$router.push({
                    name: 'generalize-creative-detail',
                    query: {
                      action: 'edit',
                      referrer: 'generalize-creative',
                      planId: scope.row.planId,
                      unitId: scope.row.unitId,
                      creativeId: scope.row.creativeId,
                      query: {
                        ...page,
                        ...$route.query
                      }
                    }
                  })"
                  class="u-table-handle iconfont iconfont-5"
                ></i>
              </el-tooltip>
              <el-tooltip
                v-permission="['promote_creative_delete']"
                effect="dark"
                placement="top"
                content="删除"
              >
                <i
                  @click="openRemoveItemData(scope.row.creativeId)"
                  class="u-table-handle el-icon-circle-close"
                ></i>
              </el-tooltip>
              <el-tooltip
                v-permission="['promote_creative_copy']"
                effect="dark"
                placement="top"
                content="复制广告创意"
              >
                <i
                  @click="$router.push({
                    name: 'generalize-creative-detail',
                    query: {
                      action: 'copy',
                      referrer: 'generalize-creative',
                      planId: scope.row.planId,
                      unitId: scope.row.unitId,
                      creativeId: scope.row.creativeId,
                      query: {
                        ...page,
                        ...$route.query
                      }
                    }
                  })"
                  class="u-table-handle iconfont iconfont-7"
                ></i>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table-column>
        <!-- eslint-disable -->
        <el-table-column
          :resizable="false"
          align="center"
          v-for="(item, index) in tableColumn"
          v-if="item.visible"
          :key="index"
          :label="item.label"
          :sortable="item.sortable"
          :sort-by="item.prop"
        >
          <el-table-column
            :resizable="false"
            align="center"
            :label="getTableDataSumValue(item.prop, {rate: ['clickRate']})"
            :prop="item.prop"
            :width="item.width"
            class-name="u-table--total"
          >
            <template slot-scope="scope">
              <!-- 所属层级 -->
              <template v-if="item.prop === 'hierarchy'">
                <div class="u-tl">{{scope.row.planName}}/{{scope.row.unitName}}</div>
              </template>

              <!-- 开关 -->
              <template v-else-if="item.prop === 'switch'">
                <el-switch
                  v-if="[1, 2].indexOf(scope.row.status) !== -1"
                  @change="openStatus([scope.row.creativeId], scope.row.status === 1 ? 2 : 1)"
                  :value="scope.row.status"
                  :active-value="2"
                  :inactive-value="1"
                ></el-switch>
              </template>

              <!-- 状态 -->
              <el-popover
                v-else-if="item.prop === 'auditStatus'"
                placement="top"
                width="350"
                trigger="hover"
              >
                <AuditStatus>
                  <AuditStatusItem
                    v-if="scope.row.promotionStatus.innerStatus"
                    :title="getInnerStatusTitle(scope.row.promotionStatus.innerStatus)"
                    :content="scope.row.promotionStatus.innerStatus"
                  ></AuditStatusItem>
                  <AuditStatusItem
                    v-if="scope.row.promotionStatus.outerStatusWait"
                    title="<i class='el-icon-question c-hint-warn'></i> 待审核平台（不可在以下平台投放）"
                    :content="scope.row.promotionStatus.outerStatusWait.join('、')"
                  ></AuditStatusItem>
                  <AuditStatusItem
                    v-if="scope.row.promotionStatus.outerStatusAuditing"
                    title="<i class='el-icon-question c-hint-warn'></i> 审核中平台（不可在以下平台投放）"
                    :content="scope.row.promotionStatus.outerStatusAuditing.join('、')"
                  ></AuditStatusItem>
                  <AuditStatusItem
                    v-if="scope.row.promotionStatus.outerStatusPassUnion"
                    title="<i class='el-icon-success c-hint-succ'></i> 已通过审核平台（可在以下平台投放）"
                    :content="scope.row.promotionStatus.outerStatusPassUnion.join('、')"
                  ></AuditStatusItem>
                  <AuditStatusItem
                    v-if="scope.row.promotionStatus.outerStatusUnPassUnion"
                    title="<i class='el-icon-warning c-hint-error'></i> 未通过审核平台（不可在以下平台投放）"
                    :content="scope.row.promotionStatus.outerStatusUnPassUnion.join('<br>')"
                  ></AuditStatusItem>
                </AuditStatus>
                <span slot="reference">
                  <span :class="{ 'u-status--progress': scope.row.promotionStatus.status === '投放中' }">{{scope.row.promotionStatus.status}}</span>
                  <i class="c-text-high u-cursor el-icon-warning"></i>
                </span>
              </el-popover>

              <!-- 预览广告创意 -->
              <el-form
                v-else-if="item.prop === 'preview'"
                label-position="right"
                label-width="80px"
                class="preview-form"
              >
                <el-form-item label="推广链接：">
                  <el-button
                    type="text"
                    size="mini"
                    class="u-fs14"
                    @click="openWindow(scope.row.targetUrl)"
                  >查看链接</el-button>
                </el-form-item>
                <el-form-item
                  v-show="scope.row.title"
                  label="标题文案："
                >
                  {{scope.row.title}}
                </el-form-item>
                <el-form-item
                  v-show="scope.row.content"
                  label="描述："
                >
                  {{scope.row.content}}
                </el-form-item>
                <el-form-item
                  v-show="scope.row.materialPath"
                  label="创意素材："
                >
                  <span
                    class="preview-item"
                    v-for="(url, idx) in scope.row.materialPath.split(',')"
                    :key="idx"
                  >
                    <CreativeMaterial
                      :url="url"
                      @click="previewCreative(scope.row.materialPath.split(','), idx)"
                    ></CreativeMaterial>
                  </span>
                </el-form-item>
              </el-form>

              <!-- 点击率 -->
              <template v-else-if="item.prop === 'clickRate' && scope.row[item.prop] !== null">{{decimalMultiply(scope.row[item.prop], 100) + '%'}}</template>

              <!-- 创意名称 -->
              <template v-else-if="item.prop === 'creativeName'">
                <div class="u-tl">{{scope.row[item.prop]}}</div>
              </template>

              <!-- 竞价成功率 -->
              <template v-else-if="item.prop === 'bidsSuccessRate' && scope.row.bidsSuccessRate !== null">
                <el-tooltip
                  effect="dark"
                  placement="top"
                >
                  <div
                    slot="content"
                    class="u-w200"
                  >{{getBidsSuccessRateTooltip(scope.row.bidsSuccessRate)}}</div>
                  <span :class="{
                    'c-hint-error': scope.row.bidsSuccessRate < 0.3,
                    'c-hint-warn': scope.row.bidsSuccessRate >= 0.3 && scope.row.bidsSuccessRate <= 0.5
                  }">
                    {{decimalMultiply(scope.row.bidsSuccessRate, 100) + '%'}}
                  </span>
                </el-tooltip>
              </template>

              <!-- 其他 -->
              <template v-else>{{scope.row[item.prop]}}</template>
            </template>
          </el-table-column>
        </el-table-column>
      </template>
    </TableFull>

    <!-- 创意素材 -->
    <Dialog
      :visible.sync="previewCreativeVisible"
      :width="600"
      title="创意素材"
    >
      <div class="u-p20">
        <el-carousel :initial-index="previewCreativeIndex">
          <el-carousel-item
            v-for="url in previewCreativeUrls"
            :key="url"
            class="preview-carousel-items"
          >
            <CreativeMaterial
              is-controls
              :url="url"
            ></CreativeMaterial>
          </el-carousel-item>
        </el-carousel>
      </div>
    </Dialog>

    <!--启用-->
    <DialogConfirm
      :visible.sync="statusOpenVisible"
      :buttons="['启 用', '关 闭']"
      :button-primary="[0]"
      @confirm="confirmStatusOpen"
      :content="`是否要启用这${statusKeys.length}个创意？`"
    ></DialogConfirm>

    <!--停用-->
    <DialogConfirm
      :visible.sync="statusCloseVisible"
      :buttons="['停 用', '关 闭']"
      :button-primary="[0]"
      @confirm="confirmStatusClose"
      :content="`是否要停用这${statusKeys.length}创意？`"
    ></DialogConfirm>

    <!--删除-->
    <DialogConfirm
      :visible.sync="removeDialogVisible"
      :buttons="['删 除', '关 闭']"
      :button-primary="[0]"
      @confirm="confirmRemoveItemData"
      content="是否删除此创意?"
      tip="已投放数据将正常统计！"
    ></DialogConfirm>
  </SectionContainer>
</template>

<script>
import Moment from "moment";

import Dialog from "@/components/dialog";
import DialogConfirm from "@/components/dialog-confirm";
import TableFull from "@/components/table-full";
import SectionContainer from "@/components/section-container";
import AuditStatus from "@/components/audit-status";
import AuditStatusItem from "@/components/audit-status-item";
import CreativeMaterial from "@/components/creative-material";
import Tabs from "@/components/tabs";
import TabsItem from "@/components/tabs-item";
import CustomTableColumn from "@/components/custom-table-column";

import DATERANGE_OPTIONS from "@/assets/js/daterange-option";
import {
  fetchCreativeList,
  fetchCreativeStatus,
  fetchCreativeRemove,
  fetchAdLocalSelect
} from "@/api";
import { sessionStorage, isVideo, hasPermission } from "@/utils";
import { decimalMultiply } from "@/utils/decimal";

export default {
  components: {
    Dialog,
    DialogConfirm,
    TableFull,
    SectionContainer,
    Tabs,
    TabsItem,
    AuditStatus,
    AuditStatusItem,
    CreativeMaterial,
    CustomTableColumn
  },
  data() {
    return {
      DATERANGE_OPTIONS,

      user: sessionStorage.get("USER"),

      // 确认弹窗
      statusOpenVisible: false,
      statusCloseVisible: false,
      statusKeys: [],
      removeDialogVisible: false,
      removeDialogId: "",

      // 查看大图
      previewCreativeVisible: false,
      previewCreativeUrls: "",
      previewCreativeIndex: 0,

      // 投放广告位
      adlocalAdxOptions: [],
      adlocalMediaOptions: [],
      adlocalSpaceOptions: [],

      filter: {
        dimensionality: 0, // 数据维度
        status: 0,
        daterange: [
          Moment().format("YYYY-MM-DD"),
          Moment().format("YYYY-MM-DD")
        ],
        keyword: "",
        adxId: "",
        mediaId: "",
        pid: ""
      },

      page: {
        pageSize: 50,
        pageNo: Number(this.$route.query.pageNo) || 1
      },
      // 广告创意/Table
      tableData: [],
      tableColumn: [
        {
          label: "是否启用",
          prop: "switch",
          width: 55,
          visible: hasPermission(["promote_creative_enable"])
        },
        {
          label: "广告位名称",
          prop: "adspaceName",
          width: 150,
          visible: false
        },
        {
          label: "ADX平台",
          prop: "adxName",
          width: 80,
          visible: false
        },
        {
          label: "投放媒体",
          prop: "mediaName",
          width: 80,
          visible: false
        },
        {
          label: "创意名称",
          prop: "creativeName",
          width: 150,
          visible: true
        },
        {
          label: "创意ID",
          prop: "creativeId",
          visible: true
        },
        // 所属层级：planName/unitName
        {
          label: "所属层级",
          prop: "hierarchy",
          width: 150,
          visible: true
        },
        {
          label: "状态",
          prop: "auditStatus",
          visible: true
        },
        /**
         * 预览广告创意
         * 推广链接：targetUrl
         * 标题文案：title
         * 描述：content
         * 图片：materialPath
         */
        {
          label: "预览广告创意",
          prop: "preview",
          width: 350,
          visible: true
        },
        {
          label: "竞价成功率",
          prop: "bidsSuccessRate",
          sortable: true,
          visible: true
        },
        {
          label: "APP开始下载数",
          prop: "downloadStartNumber",
          visible: false,
          custom: true
        },
        {
          label: "APP下载完成数",
          prop: "downloadCompleteNumber",
          visible: false,
          custom: true
        },
        {
          label: "APP开始安装数",
          prop: "installationStartNumber",
          visible: false,
          custom: true
        },
        {
          label: "APP安装完成数",
          prop: "installationCompleteNumber",
          visible: false,
          custom: true
        },
        {
          label: "APP激活数",
          prop: "activationNumber",
          visible: false,
          custom: true
        },
        {
          label: "APP注册数",
          prop: "registeredNumber",
          visible: false,
          custom: true
        },
        {
          label: "总消耗(元)",
          prop: "biddingPrice",
          sortable: true,
          visible: true
        },
        {
          label: "曝光数",
          prop: "displayNumber",
          sortable: true,
          visible: true
        },
        {
          label: "点击数",
          prop: "clickNumber",
          sortable: true,
          visible: true
        },
        {
          label: "点击率",
          prop: "clickRate",
          sortable: true,
          visible: true
        },
        {
          label: "点击均价(元)",
          prop: "cpcAveragePrice",
          sortable: true,
          visible: true
        },
        {
          label: "千次曝光均价(元)",
          prop: "cpmAveragePrice",
          sortable: true,
          visible: true
        }
      ],
      tableSelectionData: [],
      tableTotal: 0
    };
  },
  computed: {
    filterBody() {
      let params = {};
      if (this.filter.dimensionality === 1) {
        params = {
          adxId: this.filter.adxId,
          mediaId: this.filter.mediaId,
          pid: this.filter.pid
        };
      }
      return {
        ...params,
        dimensionality: this.filter.dimensionality,
        startTime: this.filter.daterange[0],
        endTime: this.filter.daterange[1],
        searchNameOrId: this.filter.keyword,
        status: this.filter.status,
        unitId: this.$route.query.unitId,
        planId: this.$route.query.planId
      };
    },
    // 拼接选中的数据
    checkedTableData() {
      return this.tableSelectionData.map(item => item.creativeId);
    }
  },
  watch: {
    // 广告位维度展示列
    "filter.dimensionality"(v) {
      this.tableColumn.forEach(item => {
        if (["adspaceName", "adxName", "mediaName"].includes(item.prop)) {
          item.visible = v === 1;
        }
      });
      this.getTable();
    },
    $route() {
      this.search();
    }
  },
  methods: {
    decimalMultiply,
    isVideo,

    // adx改变
    adlocalAdxChange(id) {
      // 媒体
      this.filter.mediaId = "";
      this.adlocalMediaOptions = this.adlocalAdxOptions.find(
        item => item.id === id
      ).children;
      // 广告位
      this.filter.pid = "";
      this.adlocalSpaceOptions = [];
    },
    // 媒体改变
    adlocalMediaChange(id) {
      // 广告位
      this.filter.pid = "";
      this.adlocalSpaceOptions = this.adlocalMediaOptions.find(
        item => item.id === id
      ).children;
    },
    // 广告位
    fetchAdLocalSelect() {
      return fetchAdLocalSelect({
        query: {
          unionId: 0, // adx
          mediaId: 0, // 媒体
          adspaceType: 0 // 创意形式，默认
        }
      }).then(res => {
        this.adlocalAdxOptions = res.data.list;
      });
    },
    // 预览创意
    previewCreative(urls, index) {
      this.previewCreativeVisible = true;
      this.previewCreativeUrls = urls;
      this.previewCreativeIndex = index;
    },
    // 重置
    search() {
      this.page.pageNo = 1;
      this.getTable();
    },
    // 获取数据
    getTable() {
      this.tableData = [];
      this.tableTotal = 0;
      fetchCreativeList({
        query: {
          userId: this.user.userId
        },
        body: {
          ...this.page,
          ...this.filterBody
        }
      }).then(res => {
        this.tableTotal = res.data.count;
        if (res.data.list && res.data.list.length) {
          this.tableData = this.modTableDataSumList(
            res.data.sumList,
            res.data.list
          );
        }
      });
    },
    // 给第一行数据添加总计相关数据
    modTableDataSumList(sumList, data) {
      let sum = sumList.length ? sumList[0] : {};
      let sumObj = {};
      for (let key in sum) {
        sumObj[`__` + key] = sum[key];
      }
      data[0] = {
        ...data[0],
        ...sumObj
      };
      return data;
    },
    // 获取总计的相关值
    getTableDataSumValue(prop, { rate }) {
      let sum = this.tableData[0] || {};
      let sumProp = `__${prop}`;
      if (sumProp in sum) {
        let value = sum[sumProp];
        // 添加百分比
        if (rate.indexOf(prop) !== -1) {
          return decimalMultiply(value, 100) + "%";
        }
        return String(value);
      }
      return "";
    },
    // 表格多选
    tableSelectionChange(val) {
      this.tableSelectionData = val;
    },
    // 确认启用
    confirmStatusOpen(index) {
      if (index === 0) {
        this.changeStatus(this.statusKeys, 2).then(() => {
          this.statusOpenVisible = false;
          this.getTable();
        });
      } else {
        this.statusOpenVisible = false;
      }
    },
    // 确认停用
    confirmStatusClose(index) {
      if (index === 0) {
        this.changeStatus(this.statusKeys, 1).then(() => {
          this.statusCloseVisible = false;
          this.getTable();
        });
      } else {
        this.statusCloseVisible = false;
      }
    },
    // 启用多个
    openStatusMulti() {
      if (!this.checkedTableData.length) {
        return this.$message({
          message: "请选择创意",
          duration: 2000
        });
      }
      this.openStatus(this.checkedTableData, 2);
    },
    // 停用多个
    closeStatusMulti() {
      if (!this.checkedTableData.length) {
        return this.$message({
          message: "请选择创意",
          duration: 2000
        });
      }
      this.openStatus(this.checkedTableData, 1);
    },
    // 删除一条
    openRemoveItemData(id) {
      this.removeDialogVisible = true;
      this.removeDialogId = id;
    },
    // 确认删除一条
    confirmRemoveItemData(index) {
      if (index === 0) {
        fetchCreativeRemove({
          query: {
            id: this.removeDialogId
          }
        }).then(() => {
          this.removeDialogVisible = false;
          this.getTable();
        });
      } else {
        this.removeDialogVisible = false;
      }
    },
    // 切换状态
    openStatus(keys, value) {
      this.statusKeys = keys;
      if (1 === value) {
        this.statusCloseVisible = true;
      } else if (2 === value) {
        this.statusOpenVisible = true;
      }
    },
    // 状态操作
    changeStatus(keys, value) {
      return fetchCreativeStatus({
        query: {
          ids: keys.join(),
          status: value
        }
      }).then(() => {
        this.$message({
          message: "操作成功",
          duration: 1000
        });
      });
    },
    // 分页
    currentChange(val) {
      this.page.pageNo = val;
      this.getTable();
    },
    sizeChange(val) {
      this.page.pageSize = val;
      this.getTable();
    },
    // 打开新页面
    openWindow(url) {
      if (url) {
        window.open(url);
      }
    },
    // 竞价成功率提示
    getBidsSuccessRateTooltip(rate) {
      if (rate < 0.3) {
        return "广告竞争力很低，建议提高出价以获得更多的曝光";
      } else if (rate > 0.5) {
        return "广告竞争力正常，可持续投放";
      }
      return "广告竞争力较低，建议尝试放宽定向、提高出价等方式优化";
    },
    // 获取内部审核状态title
    getInnerStatusTitle(v) {
      if (v.indexOf("审核通过") !== -1) {
        return "<i class='el-icon-success c-hint-succ'></i> 内部审核";
      } else if (v.indexOf("审核拒绝") !== -1) {
        return "<i class='el-icon-warning c-hint-error'></i> 内部审核";
      }
      return "<i class='el-icon-question c-hint-warn'></i> 内部审核";
    }
  },
  created() {
    this.fetchAdLocalSelect();
    this.getTable();
  }
};
</script>

<style lang="scss">
.preview {
  &-form {
    text-align: left;
    padding: 10px 0;
    .el-form-item {
      margin-bottom: 5px !important;
    }
    .el-form-item__label,
    .el-form-item__content {
      line-height: 30px !important;
    }
    .el-form-item__label {
      padding-right: 5px !important;
    }
  }
  &-item {
    border: 1px solid #ebeef5;
    width: 100px;
    height: 100px;
    line-height: 100px;
    margin: 0 10px 10px 0;
    display: inline-block;
    text-align: center;
    cursor: pointer;
  }
  &-carousel-items {
    text-align: center;
    line-height: 300px;
  }
}
</style>
